<template>
  <div class="law-firm-audit right-height bg-c-fff mb70">
    <h2 class="box-title rel">律师年检</h2>
    <div class="right-box">
      <div class="tab">
        <ul class="fix">
          <li class="flo-left cup" v-bind:class="{active:index===1}" @click="tab(1)">未查看</li>
          <li class="flo-left cup" v-bind:class="{active:index===2}" @click="tab(2)">已查看</li>
        </ul>
        <div class="tab-inner">
          <table class="tab-con" width="100%" v-show="index===1">
            <tr>
              <th>律师姓名</th>
              <th>联系方式</th>
              <th>所属律所</th>
              <th>提交时间</th>
              <th>律师个人信息</th>
              <th>律师年检信息</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in noSeeList">
              <td>{{item.lawyerName}}</td>
              <td>{{item.registPhone}}</td>
              <td>{{item.firmName}}</td>
              <td>{{item.updateTime}}</td>
              <td><img :src=item.lawyerInfoPic alt=""></td>
              <td><img :src=item.lawyerYearPic alt=""></td>
              <td>
                <button @click="onBtnClick(item.id, item.memberId)" class="auto small-btn-css blue-button">查看详情</button>
              </td>
            </tr>
          </table>
          <table class="tab-con" width="100%" v-show="index===2">
            <tr>
              <th>律师姓名</th>
              <th>联系方式</th>
              <th>所属律所</th>
              <th>提交时间</th>
              <th>律师个人信息</th>
              <th>律师年检信息</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in seeList">
              <td>{{item.lawyerName}}</td>
              <td>{{item.registPhone}}</td>
              <td>{{item.firmName}}</td>
              <td>{{item.updateTime}}</td>
              <td><img :src=item.lawyerInfoPic alt=""></td>
              <td><img :src=item.lawyerYearPic alt=""></td>
              <td>
                <button @click="onBtnClick(item.id, item.memberId)" class="auto small-btn-css blue-button">查看详情</button>
              </td>
            </tr>
          </table>
        </div>
        <div class="page-box">
          <pagination :index="allIndex" :total="allTotal" v-show="noSeeList.length!==0&&index===1" @pagechange="onNoseeChanged"></pagination>
          <pagination :index="passedIndex" :total="passedTotal" v-show="seeList.length!==0&&index===2" @pagechange="onPassedChanged"></pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import Pagination from '../components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      index: 1,
      allIndex: 1,
      allTotal: 0,
      passedIndex: 1,
      passedTotal: 0,
      noSeeIndex: 1,
      noSeeTotal: 0,
      noSeeList: [],
      seeListIndex: 1,
      seeListTotal: 0,
      seeList: [],
      currentId: '',
      currentReview: ''
    }
  },
  mounted() {
    this.getListData(0, 1)
    this.getListData(1, 1)
  },
  methods: {
    tab(index) {
      this.index = index
      if (this.index === 1) {
        this.getListData(0, this.noSeeIndex)
      }
      if (this.index === 2) {
        this.getListData(1, this.seeIndex)
      }
    },
    onNoseeChanged(n) {
      this.getListData(0, n)
    },
    onPassedChanged(n) {
      this.getListData(1, n)
    },
    getListData(type, page) {
      this.$http.get('/memberLawyer/query/lawyer/yearInspection', {
        params: {
          isRead: type,
          page: page,
          rows: 10
        }
      }).then(data => {
        if (data.data.httpCode === 200) {
          if (type === 0) {
            this.noSeeList = data.data.rows
            this.allIndex = data.data.pages
            this.allTotal = Math.ceil(data.data.rows.length / 10)
          }
          if (type === 1) {
            this.seeList = data.data.rows
            this.passedIndex = data.data.pages
            this.passedTotal = Math.ceil(data.data.rows.length / 10)
          }
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        this.$toasted.show('网络出错')
        console.log(err)
      })
    },
    onBtnClick(id, memberId) {
      this.$router.push('/law-details?id=' + memberId)
      this.$http.post('/memberLawyer/switch/read/state', {
          id: id
      }).then(data => {
        if (data.data.httpCode === 200) {
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错！')
      })
    }
  }
}

</script>
<style type="text/css" scoped>
.right-height {
  min-height: 800px;
}

.tab ul {
  height: 40px;
  line-height: 40px;
}

.tab ul li {
  border: 1px solid #01378c;
  padding: 0px 30px;
  margin-right: 10px;
  font-size: 15px;
  color: #01378c;
}

.tab ul li.active {
  background-color: #01378c;

  color: #fff;
}

.tab-inner {
  margin-top: 20px;
}

table img {
  width: 80px;
  vertical-align: middle;
}

.page-box {
  margin-top: 20px;
}

</style>
